<template>
	<view class="index">
		<!-- 顶部背景 -->
		<view class="hdbg">
			<view class="more" @click="handleOpen"><image src="/static/icon/more.png" mode="widthFix"></image></view>
		</view>
		<!-- 中间 -->

		<view class="bodys">
			<view class="headers" @click="$navTo.togo('/pages/me/edit/index')">
				<view class="headers-img"><image :src="info.upload_avatar ? info.upload_avatar.path_text : '/static/home/default_user.png'" mode="aspectFill"></image></view>
				<view class="userlt ac">{{info.user_info.order_id == 0?info.user_info.order_id_text: info.user_info.order_member.member_name}}</view>
			</view>
			<view class="edit-info">
				<!-- <navigator class="btns ac" :url="'/pages/me/edit/index?title=' + info.user_info.nickname" hover-class="none">编辑资料</navigator> -->
				<view @click="$navTo.togo('/pages/me/edit/index',{title:info.user_info.nickname})" class="btns ac" >编辑资料</view>
				<view @click="$navTo.togo('/pages/me/recharge')" class="btns ac" url="" >
					<text class="money-add"></text>
					<text>充值</text>
				</view>
			</view>
			<view class="infos">
				<view class="info-left ">
					<view class="text1">{{ info.user_info.nickname }}</view>
					<view class="text2">用户ID {{ info.id }}</view>
					<view class="text3">可观看次数：{{info.user_info.order_id ==0?info.user_account.number ||0 :'无限制' }}</view>
				</view>
				<view class="info-right flex-jc-ac">
					<text class="uni-ellipsis w200 ac" v-if="info.user_account">积分: {{ info.user_account.integral }}</text>
					<view @click="$navTo.togo('/pages/me/exchange')" class="duihuan" url="" >兑换</view>
				</view>
			</view>
			<view class="pd-lr36 brief">
				<view class="info-people" @click="$navTo.togo('/pages/me/edit/personal',{intro:info.user_info.intro})"  >
					{{ info.user_info.intro ? info.user_info.intro : '您还没有填写个人简介，点击添加...' }}
				</view>
			</view>
			<view class="pd-lr36 tags"  @click="$navTo.togo('/pages/me/edit/index')" >
				<view class="icons" v-if="info.user_info.sex || info.user_info.birthday">
					<view v-if="info.user_info.sex" class="minpng">
						<image :src="info.user_info.sex == 1 ? '/static/icon/man.png' : '/static/icon/woman.png'" mode="widthFix" />
					</view>
					<text v-if="info.user_info.birthday">{{ info.user_info.birthday_text + '岁' }}</text>
					<text v-if="!info.user_info.birthday">{{ info.user_info.sex == 1 ? '男' : '女' }}</text>
				</view>
				<view class="tips" v-if="info.user_info.address">{{ info.user_info.address_text | addr }}</view>
				<view class="olds" v-if="!info.user_info.sex || !info.user_info.address || !info.user_info.birthday">
					<text>+ 增加</text>
					<text v-if="!info.user_info.sex">性别</text>
					<text v-if="!info.user_info.address">地址</text>
					<text v-if="!info.user_info.birthday">生日</text>
					<text>标签</text>
				</view>
			</view>
			<view class="go-infos pd-lr36">
				<view  @click="$navTo.togo('/pages/message/fabulous')"  class="flex-jc-ac">
					<text>{{ info.user_info.praise_count_text }}</text>
					<text class="text">获赞</text>
				</view>
				<view @click="$navTo.togo('/pages/me/relatedlist',{data:'follow'})" class="flex-jc-ac">
					<text>{{ info.user_info.follow_count_text }}</text>
					<text class="text">关注</text>
				</view>
				<view @click="$navTo.togo('/pages/me/relatedlist',{data:'fans'})" hover-class="none" class="flex-jc-ac">
					<text>{{ info.user_info.fans_count_text }}</text>
					<text class="text">粉丝</text>
				</view>
			</view>
		</view>

		<!-- 底部视频 -->
		<view class="lists">
			<view class="fenlei">
				<text @click="indexs = 0" class="listbox mr80" :class="{ redbottom: indexs === 0 }">作品 {{ info.user_info.work_count_text }}</text>
				<text @click="indexs = 1" class="listbox" :class="{ redbottom: indexs === 1 }">喜欢 {{ info.user_info.like_count_text }}</text>
			</view>
			<checkbox-group class="videolist" @change="checkboxChange">
				<view
					v-for="(items, index) in imageList"
					class="videoitem"
					:style="{ 'background-image': 'url(' + imgFn(indexs == 0 ? items.upload_work_cover : (items.user_work && items.user_work.upload_work_cover))  + ')' }"
					:key="index"
					@click="goVideo(index)"
					@longpress="handleEdits"
				>
					<view class="titles">
						<view class="video-img"><image src="/static/home/like_on.png" mode="widthFix"></image></view>
						<text>{{ indexs == 0 ? items.like_count_text : items.user_work.like_count_text}}</text>
					</view>
					<!-- 阻止冒泡 -->
					<view @click.stop="0">
						<checkbox v-if="edits" color="red" class="acc-img" :value="items.id" />
					</view>
				</view>
			</checkbox-group>
			<view class="nolist ac" v-if="nodata">没有更多了...</view>
		</view>
		<my-popup ref="clears" type="bottom">
			<view class="button-pop">
				<button @click="handleDelete" :type="endPop.length > 0 ? 'warn' : 'default'">{{ endPop.length > 0 ? '删除' : '取消' }}</button>
			</view>
		</my-popup>
		<uni-popup ref="popup" type="bottom">
			<view class="apple-radio">
				<view @click="handleGopage('jf')" class="integral1">积分记录</view>
				<view @click="handleGopage('yq')" class="integral2">邀请</view>
				<view @click="handleGopage('gh')" class="integral3">更换账号</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import myPopup from './components/uni-popup.vue';
import { apiGetView, apiGetUserWorl, apiGetUserLike, apiGetUserWorlDelete} from '@/api/me.js';
export default {
	components: {
		uniPopup,
		myPopup
	},
	onShow() {
		this.defaultData()
		this.getInfo();
	},
	filters:{
		addr(addr){
			if(addr == '00'){
				this.info.user_info.address = ''
				return
			}
			return addr.split("-")[0].indexOf("市") >= 0? addr.split("-")[1]:addr
		}
	},
	data() {
		return {
			info: {
				id: '',
				upload_avatar: '',
				sex: 0,
				user_info: {
					order_id_text: '',
					address_text:"",
					number:0,
					integral:0,
					order_member:{member_name:''}
				}
			},

			indexs: 0,
			edits: false,
			imageList: [
				{
					id: '4',
					upload_work_cover: {
						path_text: ''
					},
					like_count: ''
				}
			],
			tempList:[],
			endPop: [],
			likePage:1,
			workPage:1,
			nodata:false,
			pageSize:15,
			openUrl:'',
		};
	},
	watch:{
		indexs(val){
			this.defaultData()
			this.getData(val)
		}
	},
	methods: {
		imgFn(url){
			return url ? url.path_text : '/static/icon/noImg.jpg'
		},
		defaultData(){
			this.imageList = []
			this.nodata = false
			this.endPop = []
			this.edits = false
			this.likePage = 1
			this.workPage = 1
			if(this.$refs.clears){
			this.$refs.clears.close()
			}
		},
		getInfo() {
			return new Promise((resfn,rejfn)=>{
				apiGetView().then(res => {
					this.info = res.data;
					uni.setStorageSync('userinfo', this.info);
					if(this.info.user_info.address == '00'){
						delete this.info.user_info.address
					}
					resfn(res)
				}).catch(e=>resfn(e));
				this.imageList = []
				this.getData(this.indexs)
			})
		},
		goVideo(index){
			let data = {
				videoType:'',
				page:'',
				pageSize:this.pageSize,
				videoIndex:index,
			}
			if(this.indexs){
				data.videoType = 'mylike'
				data.page = this.likePage
			}else{
				data.videoType = 'myopus'
				data.page = this.workPage
			}
			this.$navTo.togo('/pages/glob/video/index',data)
		},
		getData(type){
			if(type){
				apiGetUserLike({page:this.likePage,page_size:this.pageSize}).then(res=>{
					this.tempList = res.data.data
					this.imageList = this.imageList.concat(res.data.data)
				})
			}else{
				apiGetUserWorl({page:this.workPage,page_size:this.pageSize}).then(res => {
					this.tempList = res.data.data
					this.imageList = this.imageList.concat(res.data.data)
					
				});
			}
			
		},
		handleOpen() {
			this.$refs.popup.open();
		},
		checkboxChange(e) {
			this.endPop = e.detail.value;
		},
		handleEdits() {
		
			this.endPop = [];
			this.edits = true;
			this.$refs.clears.open();
		},
		// 更多
		handleGopage(type) {
			let that = this
			switch (type) {
				case 'jf':
					that.$navTo.togo('/pages/me/record',{title:'jf'})
					break;
				case 'yq':
					this.openUrl = uni.getStorageSync("installUrl")
					uni.setClipboardData({
						data:that.openUrl+'?referral_code='+encodeURIComponent(btoa(that.info.id)),
						success:function() {
							uni.shareWithSystem({
								href:that.openUrl+'?referral_code='+encodeURIComponent(btoa(that.info.id))
							})
						}
					})
					break;
				case 'gh':
					that.$navTo.togo('/pages/me/account')
					break;
			}
			that.$refs.popup.close();
		},
		// 删除或者取消
		handleDelete() {
			if (this.endPop.length > 0) {
				apiGetUserWorlDelete({id:this.endPop}).then(res=>{
					this.getInfo()
				})
			}
			this.$refs.clears.close();
			this.edits = false;
		}
	},
	// 上拉加载
	onReachBottom(){
		if (this.tempList.length < this.pageSize) {
			this.nodata = true
			return
		}
		if(this.indexs){
			this.likePage++
		}else{
			this.workPage++
		}
		this.getData(this.indexs)
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.defaultData()
		this.getInfo().then(res=>{
			uni.stopPullDownRefresh();  //停止下拉刷新动画
		})
	
	}

};
</script>

<style scoped lang="scss">
	.w200{
		width: 200upx;
	}
.index {
	// font-size: 28upx;
	font-size: 20upx;
	height: 100%;

	// 背景
	.hdbg {
		height: 220upx;
		background: #1c1b2b;
	}

	.userlt {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background: #434254;
		width: 116upx;
		border-radius: 18upx;
		font-size: 20upx;
		height: 36upx;
		line-height: 36upx;
	}
	.money-add{
		background: url(~@/static/icon/cz.png) no-repeat;
		width: 32upx;
		background-size: contain;
		height: 32upx;
		vertical-align: sub;
		margin-right: 8upx;
		display: inline-block;
	}
	.tags {
		margin-bottom: 40upx;
		display: flex;
		.olds {
			padding: 0 30upx;
			text-align: center;
			font-size: 12 * 2upx;
			height: 20 * 2upx;
			line-height: 20 * 2upx;
			color: #747384;
			background: #1d1a2b;
			display: inline-block;
			border-radius: 2 * 2upx;
		}
	}

	.tips {
		color: #747384;
		background: #1d1a2b;
		height: 20 * 2upx;
		font-size: 20upx;
		text-align: center;
		margin-right: 10upx;
		padding: 0 10upx;
		display: inline-block;
		line-height: 20 * 2upx;
		border-radius: 2 * 2upx;
	}

	.minpng {
		width: 20upx;
		height: 20upx;
		// transform: translateY(-2upx);
		margin-right: 2upx;
	}

	.more {
		margin: 30upx 30upx 0 0;
		float: right;
		height: 60upx;
		line-height: 60upx;
		width: 60upx;
		font-size: 36upx;
		text-align: center;
		background: #434254;
		border-radius: 50%;
	}

	// 中间
	.bodys {
		width: 100%;
		min-height: 600upx;
		position: relative;
	}

	.brief {
		padding-top: 40upx;
		padding-bottom: 40upx;
		color: #dddbfb;
	}

	.btns {
		width: 120 * 2upx;
		height: 40 * 2upx;
		line-height: 40 * 2upx;
		background: rgba(28, 27, 43, 1);
		border-radius: 4 * 2upx;
	}

	.btns:last-child {
		width: 90 * 2upx;
		height: 40 * 2upx;
		line-height: 40 * 2upx;
		background: rgba(28, 27, 43, 1);
		border-radius: 4 * 2upx;
	}

	.infos {
		margin: 0 16 * 2upx;
		display: flex;
		height: 90 * 2upx;
		padding-bottom: 40upx;
		justify-content: space-between;
		border-bottom: 1px solid #1c1b2b;
	}

	.duihuan {
		width: 56 * 2upx;
		height: 24 * 2upx;
		margin-top: 20upx;
		line-height: 24 * 2upx;
		font-size: 24upx;
		text-align: center;
		background: linear-gradient(22deg, #883b8b 0%, #f01332 100%);
		border-radius: 4 * 2upx;
	}

	.info-left {
		display: flex;
		justify-content: space-around;
		flex-flow: column;

		.text1 {
			color: #dddbfb;
			font-size: 44upx;
		}

		.text2 {
			color: #747384;
			font-size: 24upx;
		}

		.text3 {
			color: #fc315a;
			font-size: 24upx;
		}
	}

	.info-right {
		width: 200upx;
		flex-flow: column;

		text {
			font-size: 26upx;
			color: #ffd800;
		}
	}

	// 底部
	.lists {
		color: #dddbfb;
		padding: 0 16 * 2upx;
		margin-top: 80upx;
	}

	text.redbottom {
		font-weight: 600;
		color: rgba(221, 219, 251, 1);
		font-size: 16 * 2upx;
		position: relative;

		&::after {
			content: '';
			background: url(~@/static/icon/active.png) no-repeat;
			display: inline-block;
			position: absolute;
			bottom: -30upx;
			background-size: 100%;
			transform: translateX(-50%);
			left: 50%;
			width: 32upx;
			height: 10upx;
		}
	}

	.videolist {
		display: flex;
		flex-wrap: wrap;
		
		.videoitem {
			width: 224upx;
			height: 300upx;
			margin-bottom: 8upx;
			margin-right: 6upx;
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center;
			position: relative;
			padding: 20upx;
			box-sizing: border-box;
			font-size: 12px;
			color: #fff;
		}
		.titles {
			display: flex;
			position: absolute;
			bottom: 20upx;
			align-items: center;
		}
		.video-img {
			width: 28upx;
			height: 28upx;
			margin-right: 8upx;
		}
		.acc-img {
			position: absolute;
			right: 10upx;
			top: 10upx;
		}
	}

	.headers {
		position: absolute;

		top: -20upx;
		left: 34upx;
	}
	.headers-img {
		overflow: hidden;
		width: 180upx;
		display: flex;
		background-color: #000;
		align-items: center;
		justify-content: center;
		height: 180upx;
		border-radius: 50%;
		border: 2px solid #000;
	}
	.edit-info {
		padding-left: 127 * 2upx;
		height: 200upx;
		padding-top: 30upx;
		padding-right: 28 * 2upx;
		display: flex;
		justify-content: space-around;
	}
	
	.info-people{
		word-break: break-all;
	}

	.fenlei {
		margin-bottom: 70upx;

		text {
			border-bottom: 2px solid transparent;
		}
	}

	.go-infos {
		color: #dddbfb;
		font-weight: 600;
		display: flex;
		font-size: 32upx;
		justify-content: space-between;

		.text {
			font-size: 28upx;
			color: #434254;
			font-weight: 400;
			margin-left: 10upx;
		}
		
	}

	.listbox {
		font-weight: 400;
		color: rgba(116, 115, 132, 1);
	}

	.mr80 {
		margin-right: 80upx;
	}

	.nolist {
		height: 100upx;
		line-height: 100upx;
		margin-bottom: 100upx;
		width: 100%;
	}

	.apple-radio {
		width: 100%;
		height: 334upx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-bottom: 80upx;
	}

	.integral1 {
		line-height: 55 * 2upx;
		border-radius: 28upx 28upx 0px 0px;
		width: 355 * 2upx;
		text-align: center;
		background: #fff;
		margin-bottom: 3upx;
		font-size: 32upx;
		color: rgba(10, 132, 255, 1);
	}

	.integral2 {
		line-height: 55 * 2upx;
		width: 355 * 2upx;
		text-align: center;
		background: #fff;
		margin-bottom: 3upx;
		font-size: 32upx;
		color: rgba(10, 132, 255, 1);
	}
	.integral3 {
		line-height: 55 * 2upx;
		border-radius: 0 0 28upx 28upx;
		width: 355 * 2upx;
		text-align: center;
		background: #fff;
		margin-bottom: 3upx;
		font-size: 32upx;
		color: rgba(10, 132, 255, 1);
	}
	.icons {
		text-align: center;
		font-size: 12 * 2upx;
		height: 20 * 2upx;
		line-height: 20 * 2upx;
		color: #747384;
		background: #1d1a2b;
		display: flex;
		padding: 0 10upx;
		margin-right: 10upx;
		border-radius: 2 * 2upx;
	}
	.button-pop {
		margin: 0 200upx 100upx;
	}
}
</style>
